{% extends 'layout_panel.html' %}

{% block html_js_code %}
<script>
layui.use(function() {
    var $ = layui.$;
    var layer = layui.layer;
    var util = layui.util;

util.on('lay-on', {
    'iframe_select_folder': function(){
      layer.open({
        title:"选择文件/文件夹",
        type: 2,
        area: ['800px', '600px'],
        content: '{% url 'sharedkit:picker_file_dir' 'dir' %}?path={% if install_folder %}{{ install_folder }}{% endif %}',
        fixed: false, // 不固定
        maxmin: true,
        shade: 0.5,
        shadeClose: false,
        btn: ['选中', '取消'],
        btnAlign: 'c',
        yes: function(index, layero){
          var iframeWin =  window[layero.find('iframe')[0]['name']];
          var elemMark = iframeWin.$('#picker_path'); // 获得 iframe 中某个输入框元素
          var value = elemMark.val();
          if($.trim(value) === '') return elemMark.focus();
          $('#id_install_folder').val(value);
          layer.closeAll();
        }
      });
    },
  })

})
</script>
{% endblock %}

{% block page_content %}
<div class="card">
<form method="post" class="form-horizontal">{% csrf_token %}
    <div class="card-body">
    <div class="form-group row">
      <label class="col-sm-1 col-form-label">{{ form.install_folder.label }}</label>
      <div class="col-sm-11">
          <div class="input-group">
          {{ form.install_folder }}
            <div class="input-group-append">
            <span class="input-group-text hand-cursor" lay-on="iframe_select_folder"><i class="fas fa-folder-open"></i></span>
            </div>
          </div>
          <span class="text-info">{{ form.install_folder.help_text }}</span>
      </div>
    </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>
</div>
{% endblock %}